import React from 'react';
import { history, IRouteComponentProps, useModel } from 'umi'
import { useState, useEffect } from 'react'
import style from '../index.less'
import { PageHeader } from 'antd';
interface URa {
  id: string;
  params: any;
}
const Detail: React.FC<IRouteComponentProps> = ({ match }: any) => {
  const [list, setLiet] = useState([]);
  const [mainlist, setMainlist] = useState([]);
  const [footlist, setFootlist] = useState([]);
  const [inde, setindex] = useState(0);
  let { getClassxqList1, getgoodxqList1 } = useModel('classify', (model) => ({
    getClassxqList1: model.getClassxqList1,
    getgoodxqList1: model.getgoodxqList1,
  }));
  let id = match.params.id;
  async function classify(id: string) {
    const res = await getClassxqList1(id);
    console.log();
    setLiet(res.data.brotherCategory);
    setMainlist(res.data.currentCategory);
  }
  useEffect(() => {
    classify(id);
  }, [getClassxqList1]);
  function ht() {
    history.go(-1);
  }
  async function tab_list(id: any, index: number) {
    const re = await getgoodxqList1(id);
    console.log(re, '------------------------123');
    setFootlist(re.data.data);
    setindex(index);
  }
  function carid(id: string) {
    history.push(`/goods/${id}`);
  }
  function carid(id:string) {
      history.push(`/goods/${id}`)
  }
  return (
    <div className={style.xqList}>
      <div className={style.xqheader}>
      <PageHeader
    className={style.siteheader}
    onBack={() => ht()}
    title=""
    subTitle="奇趣分类"
  />
      </div>
      <div className={style.xq_tab}>
        {((list as unknown) as any).map((item: any, index: number) => {
          return (
            <ul key={index}>
              <li
                onClick={() => tab_list(item.id, index)}
                className={inde === index ? style.ac : ''}
              >
                {item.name}
              </li>
            </ul>
          );
        })}
      </div>
      <div className={style.xq_main}>
        <p>{mainlist.front_desc}</p>
        <p>{mainlist.front_name}</p>
      </div>
      <div className={style.xq_foot}>
        {
          (footlist as unknown as any).map((item: any, index: number) => {
            return (
              <dl key={index}>
                <dt>
                  <img onClick={()=>carid(item.id)} src={item.list_pic_url} alt="" />
                </dt>
                <dd>
                  <p>{item.name}</p>
                  <p>￥{item.retail_price}</p>
                </dd>
              </dl>
            )
          })
        }
      </div>
    </div>
  );
};

export default Detail;
